<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片管理系统</title>
    <link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #4895ef;
            --text-color: #2b2d42;
            --light-gray: #f8f9fa;
            --white: #ffffff;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: var(--text-color);
            line-height: 1.6;
        }

        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
            padding: 2rem 0;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 0 1rem;
        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--text-color);
            opacity: 0.8;
            margin-bottom: 3rem;
            line-height: 1.8;
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            border-radius: 8px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
            min-width: 180px;
            justify-content: center;
        }

        .action-btn.primary {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 4px 14px rgba(67, 97, 238, 0.3);
        }

        .action-btn.secondary {
            background-color: var(--white);
            color: var(--text-color);
            border: 1px solid var(--light-gray);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .action-btn.primary:hover {
            background-color: var(--secondary-color);
        }

        .action-btn.secondary:hover {
            background-color: var(--light-gray);
        }

        .user-info {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            display: flex;
            align-items: center;
            background-color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            box-shadow: var(--shadow-sm);
        }

        .user-name {
            margin-right: 1rem;
            font-weight: 600;
        }

        .logout-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background-color: var(--light-gray);
            color: var(--text-color);
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            background-color: #e9ecef;
            color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .action-buttons {
                flex-direction: column;
                gap: 1rem;
            }

            .action-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="hero-section">
        <div class="container position-relative">
            <!-- 用户信息 -->
            <div class="user-info" th:if="${session.user != null}">
                <span class="user-name" th:text="${session.user.username}">用户名</span>
                <a class="logout-btn" href="/user/logout">
                    <i class="fa fa-sign-out"></i>
                    <span>退出</span>
                </a>
            </div>

            <!-- 主要内容 -->
            <div class="hero-content">
                <div class="mb-4">
                    <i class="fa fa-id-card" style="font-size: 3rem; color: var(--primary-color);"></i>
                </div>
                <h1 class="hero-title">专业商务名片管理平台</h1>
                <p class="hero-subtitle">
                    高效管理您的商务联系人信息，随时随地访问您的名片库。<br>
                    数字化管理，智能分类，让商务沟通更便捷。
                </p>

                <!-- 未登录状态 -->
                <div class="action-buttons" th:if="${session.user == null}">
                    <a class="action-btn primary" href="/user/login">
                        <i class="fa fa-sign-in"></i>
                        <span>用户登录</span>
                    </a>
                    <a class="action-btn secondary" href="/user/register">
                        <i class="fa fa-user-plus"></i>
                        <span>用户注册</span>
                    </a>
                    <a class="action-btn secondary" href="/admin/login">
                        <i class="fa fa-lock"></i>
                        <span>管理员登录</span>
                    </a>
                </div>

                <!-- 已登录状态 -->
                <div class="action-buttons" th:if="${session.user != null}">
                    <a class="action-btn primary" href="/user/businesscard">
                        <i class="fa fa-address-book-o"></i>
                        <span>我的名片</span>
                    </a>
                    <a class="action-btn secondary" href="/user/profile">
                        <i class="fa fa-user"></i>
                        <span>个人中心</span>
                    </a>
                    <a class="action-btn secondary" href="/user/change-password">
                        <i class="fa fa-key"></i>
                        <span>修改密码</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.bundle.min.js}"></script>
    <style>
        .action-buttons a {
            text-decoration: none; /* 去除下划线 */
        }
    </style>
</body>
</html>
